<template>
    <div>
        <div class="main Router" style="overflow-x: hidden;">
            <div>
                <LangHeaderS :screenWidth="screenWidth" />
            </div>
            <div :class="{ 'page-content': screenWidth > 1000, 'h5-content': screenWidth <= 1000 }">
                <div class="main">
                    <div class="index-banner">
                        <div class="video">
                            <div :style="{minHeight:info.banner && info.banner.video?'':'51vw'}">
                                <video
                                    v-if="info.banner && info.banner.video" muted="muted" autoplay="autoplay"
                                    loop="loop" playsinline="true" preload="auto" x5-playsinline="true"
                                    x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true"
                                    webkit-playsinline="true">
                                    <source :src="info.banner.video" type="video/mp4">
                                </video>
                            </div>
                        </div>
                        <img src="@/assets/img/tip.png" alt="" class="tip">
                    </div>
                    <div class="About">
                        <div class="title wow fadeIn">{{ $t('h.Cultural') }}</div>
                        <div class="text">
                            {{ $t('h.articeIn') }}
                        </div>
                        <!-- <div class="classify">
                            <div class="item" @click="goPage('/lang-about', 1)"><i class="l-iconfont icon">&#xe607;</i>
                                <div :class="{ name: true, ruSize: $i18n.locale == 'ru' }">{{ $t('h.Identifying') }}
                                </div>
                            </div>
                            <div class="item" @click="goPage('/lang-about', 2)"><i class="l-iconfont icon">&#xe626;</i>
                                <div :class="{ name: true, ruSize: $i18n.locale == 'ru' }">{{ $t('h.Culture') }}</div>
                            </div>
                            <div class="item" @click="goPage('/lang-about', 3)"><i class="l-iconfont icon">&#xe610;</i>
                                <div :class="{ name: true, ruSize: $i18n.locale == 'ru' }">{{ $t('h.AdminD') }}</div>
                            </div>
                            <div class="item" @click="goPage('/lang-about', 4)"><i class="l-iconfont icon">&#xe693;</i>
                                <div :class="{ name: true, ruSize: $i18n.locale == 'ru' }">{{ $t('h.Geography') }}</div>
                            </div>
                            <div class="item" @click="goPage('/lang-about', 5)"><i class="l-iconfont icon">&#xe616;</i>
                                <div :class="{ name: true, ruSize: $i18n.locale == 'ru' }">{{ $t('h.History') }}</div>
                            </div>
                            <div class="item" @click="goPage('/lang-about', 6)"><i class="l-iconfont icon">&#xe674;</i>
                                <div :class="{ name: true, ruSize: $i18n.locale == 'ru' }">{{ $t('h.Introduction') }}
                                </div>
                            </div>
                        </div> -->
                        <div class="More" @click="goPage('/lang-about')"> {{ $t('h.more') }} <i
                                class="l-iconfont icon">&#xe60a;</i>
                        </div>
                    </div>
                    <div class="scenic-list" :style="{minHeight:info.list_data && info.list_data.data?'':'51vw'}">
                        <div class="title">{{ $t('h.ScenicS') }}</div>
                        <div class="list-wrap" v-if="info.list_data && info.list_data.data">
                            <div class="item" @click="goPage('/lang-spot', item.id)" v-for="item in info.list_data.data"
                                :key="item.id"><img :src="item.thumbnail" alt="" srcset="">
                                <div class="name">{{ item.post_title }}</div>
                            </div>
                        </div>
                        <div class="More" @click="goPage('/lang-spot')"> {{ $t('h.more') }} <i
                                class="l-iconfont icon">&#xe60a;</i>
                        </div>
                    </div>
                    <div class="Travel">
                        <div class="top">
                            <div class="title">{{ $t('h.TravelHelp') }}</div>
                            <div class="text">{{ $t('h.tip') }}</div>
                        </div>
                        <div class="bottom">
                            <div class="wap">
                                <div class="item" @click="goPage('/lang-consultation')"><i
                                        class="l-iconfont icon">&#xe628;</i>
                                    {{ $t('h.TrC') }} </div>
                                <div class="item" @click="goPage('/lang-metro')"><i class="l-iconfont icon">&#xe6bf;</i>
                                    {{ $t('h.TrInfo') }} </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <LangFooterS :screenWidth="screenWidth" />
        </div>
    </div>
</template>
<script>
import LangHeaderS from '@/components/Lang-Header.vue'
import LangFooterS from '@/components/Lang-Footer.vue'
export default ({
    components: {
        LangHeaderS,
        LangFooterS
    },
    data() {
        return {
            names: 111,
            showTop: false,
            info: '',
            scrollPosition: 0,
        }
    },
    mounted() {
        this.getData()
    },
    computed: {
        lang() {
            return sessionStorage.getItem('lang')
        },
        screenWidth() {
            return this.$store.getters.screenWidth
        }

    },
    methods: {
        goPage(path, type) {
            this.$router.push({
                path,
                query: {
                    type
                }
            })
        },
        getData() {
            this.$api.getOtherIndex({ lang: this.lang }).then(res => {
                if (res.data.code == 1) {
                    this.info = res.data.data
                }

            })
        },

    },
})

</script>

<style lang="scss" scoped>
.bread-crumb-box {
    ::v-deep span {
        a:hover {
            color: #e31c1c;
        }
    }
}

video {
    width: 100%;
    height: 100%;
    -o-object-fit: fill;
    object-fit: fill;
}

.index-banner {
    position: relative;
}

.index-banner .tip {
    width: 1.04167vw;
    position: absolute;
    bottom: 2.08333vw;
    left: -webkit-calc(50% - 0.52083vw);
    left: calc(50% - 0.52083vw);
    -webkit-animation: bounce-down-data-cf095b8a 1.6s linear infinite;
    animation: bounce-down-data-cf095b8a 1.6s linear infinite;
}

.About .classify .item .name.ruSize {
    font-size: 0.72917vw;
}

@keyframes bounce-down-data-cf095b8a {
    25% {
        -webkit-transform: translateY(-4px);
    }

    50%,
    100% {
        -webkit-transform: translateY(0px);
    }

    75% {
        -webkit-transform: translateY(4px);
    }
}

.About {
    width: 100vw;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    padding-bottom: 1.5625vw;
}

.About .title {
    margin-top: 5.20833vw;
    text-align: center;
    font-family: Edwardian Script ITC;
    font-size: 4.16667vw;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
}

.About .text {
    margin: 0 auto;
    margin-top: 3.125vw;
    text-align: center;
    width: 82.55208vw;
    font-family: TimesNewRomanPSMT;
    font-size: 1.25vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 2.5vw;
    letter-spacing: 0px;
    color: #666666;
}

.About .classify {
    width: 79.16667vw;
    margin: 0 auto;
    margin-top: 3.125vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
}

.About .classify .item {
    cursor: pointer;
    width: 11.45833vw;
    height: 7.29167vw;
    background: rgba(0, 0, 0, 0.08);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
}

.About .classify .item .icon {
    font-size: 2.08333vw;
}

.About .classify .item .name {
    color: #666;
    font-size: 0.83333vw;
}

.About .More {
    margin: 3.125vw auto 0;
    cursor: pointer;
    width: 8.33333vw;
    height: 2.39583vw;
    border: solid 1px #d1d1d1;
    font-size: 0.9375vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 2.39583vw;
    color: #666666;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: space-evenly;
    justify-content: space-evenly;
}

.About .More .icon {
    color: #666666;
}

.scenic-list {
    width: 100vw;
    background-color: #000000;
    overflow: hidden;
}

.scenic-list .title {
    text-align: center;
    margin: 6.25vw 0 3.125vw;
    font-family: Edwardian Script ITC;
    font-size: 4.16667vw;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
}

.scenic-list .list-wrap {
    width: 87.5vw;
    margin: 0 auto 3.125vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: wrap;
}

.scenic-list .list-wrap .item {
    width: 28.125vw;
    height: 15.78125vw;
    position: relative;
    cursor: pointer;
}

.scenic-list .list-wrap .item img {
    width: 28.125vw;
    height: 15.78125vw;
    -o-object-fit: cover;
    object-fit: cover;
}

.scenic-list .list-wrap .item .name {
    position: absolute;
    bottom: 1.5625vw;
    left: 1.5625vw;
    font-family: TimesNewRomanPSMT;
    font-size: 1.25vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.5625vw;
    letter-spacing: 0px;
    color: #ffffff;
}

.More {
    margin: 3.125vw auto 6.40625vw;
    cursor: pointer;
    width: 8.33333vw;
    height: 2.39583vw;
    border: solid 1px #3f3f3f;
    font-size: 0.9375vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 2.39583vw;
    color: #666666;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: space-evenly;
    justify-content: space-evenly;
}

.More .icon {
    color: #666666;
}

.Travel {
    width: 100vw;
    height: 33.28125vw;
    background-color: #fff;
}

.Travel .top {
    height: 17.65625vw;
}

.Travel .top .title {
    height: 3.95833vw;
    margin-top: 6.25vw;
    font-size: 4.16667vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 4.16667vw;
    letter-spacing: 0px;
    color: #333333;
    text-align: center;
}

.Travel .top .text {
    margin-top: 2.08333vw;
    font-family: TimesNewRomanPSMT;
    font-size: 1.25vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1.5625vw;
    letter-spacing: 0px;
    color: #666666;
    text-align: center;
}

.Travel .bottom {
    height: 15.625vw;
    background-color: #777777;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    background: url(@/assets/img/bg-bottom.b2f3391b.png) no-repeat;
    background-size: cover;
}

.Travel .bottom .wap {
    width: 54.16667vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
}

.Travel .bottom .wap .item {
    cursor: pointer;
    padding: 0 2.08333vw;
    width: 23.95833vw;
    height: 3.125vw;
    border: solid 1px #999999;
    font-family: TimesNewRomanPSMT;
    font-size: 1.25vw;
    font-weight: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: 0px;
    color: #333333;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: left;
    justify-content: left;
    -webkit-box-align: center;
    align-items: center;
}

.Travel .bottom .wap .item .icon {
    margin-right: 1.35417vw;
    font-size: 1.5625vw;
}

.scenic-list .list-wrap .item:nth-child(n+4) {
    margin-top: 1.04167vw;
}

.About .classify .item:hover {
    background: #e31c1c;
    -webkit-animation: slide1-9f8bea08 0.5s ease;
    animation: slide1-9f8bea08 0.5s ease;
}

@keyframes slide1-9f8bea08 {
    0% {
        transform: scale(1)
    }

    25% {
        transform: scale(1.1)
    }

    50% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

.About .classify .item:hover .name,
.About .classify .item:hover .icon {
    color: #fff;
}
</style>